<template>
	<view class="content">
		<view class="hotmapc" :style="{ height: wheight + 'px' }" id="hotmapc">
			<view id="hotmap"></view>
			<!-- 右上角菜单栏 -->
			<view class="btns_nb">
				<view class="btns_btns" style="border-bottom: 1px solid #ddd;" @click="bdnav">
					<img class="iconfull" :src="$getImgs('yc-yuan-caidan.png')" />
					<view class="btns_des">菜单</view>
				</view>
				<view class="btns_btns" @click="issjt">
					<img class="iconfull"
						:src="issj?$getImgs('yc-yuan-changjing.png'):$getImgs('yc-yuan-changjing.png')"></img>
					<view v-if="!issj" class="btns_des">场景</view>
					<view v-if="issj" class="btns_des">实景</view>
				</view>
			</view>
			<!-- 右下角菜单栏 -->
			<sos :sosinfo="zxinfo" @changesos="changesos"></sos>
			<!-- 左下角菜单栏 -->
			<!-- <caidan @changezx="changezx" :zxinfo="zxinfo"></caidan> -->
			<!-- 底部菜单栏 -->
			<view class="btm-content" :style="{height:nowHeight+'px'}" :animation="showpic">
				<view class="zhankai" @touchstart="setTouch" @touchmove="getMove" @touchend="getTouch">
					<view class="tishi">{{zkstr}}</view>
					<view class="btm-menu">
						<view @click.stop.prevent="checkInd(1)" :class="[tabInd==1?'active':'','menu m0']">
							<img :src="tabInd==1?$getImgs('yc-icon-jing-c.png'):$getImgs('yc-icon-jing.png')"></img>
							<p>景区</p>
						</view>
						<view @click.stop.prevent="checkInd(188)" :class="[tabInd==188?'active':'','menu m4']">
							<img :src="tabInd==188?$getImgs('yc-icon-cun-c.png'):$getImgs('yc-icon-cun.png')"></img>
							<p>景区村</p>
						</view>
						<view @click.stop.prevent="checkInd(56)" :class="[tabInd==56?'active':'','menu m3']">
							<img :src="tabInd==56?$getImgs('yc-icon-yule-c.png'):$getImgs('yc-icon-yule.png')"></img>
							<p>娱乐</p>
						</view>

						<view @click.stop.prevent="checkInd(164)" :class="[tabInd==164?'active':'','menu m5']">
							<img :src="tabInd==164?$getImgs('yc-icon-cesuo-c.png'):$getImgs('yc-icon-cesou.png')"></img>
							<p>厕所</p>
						</view>
						<view @click.stop.prevent="checkInd(6)" :class="[tabInd==6?'active':'','menu m5']">
							<img :src="tabInd==6?$getImgs('yc-icon-wenbo-c.png'):$getImgs('yc-icon-wenbo.png')"></img>
							<p>文博</p>
						</view>
						<!-- <view @click="checkInd(1)" :class="[tabInd==1?'active':'','menu m1']">
							<img :src="tabInd==1?'http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_xl.png':'http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_xl2.png'"></img>
							<p>路线</p>
						</view> -->
					</view>
				</view>
				<view class="list">
					<view class="lmlist">
						<view :class="['taglist',nowTag==ind?'tagactive':'']" v-for="(el,ind) in allTag" @click="getList(el,ind)" v-if="el.num>0">
							{{el.name}}
						</view>
					</view>
					<view class="alllist">
						<view class="nrlist" v-for="(el,ind) in spotsDatas">
							<view class="ckxq" @click="setTc(el)">查看详情</view>
							<view style="position: relative;">
								<image v-if="el.logo!=''" :src="tabInd==56?el.logo:$getImg(el.logo)"></image>
								<image v-if="el.logo==''" :src="$getImgs('yc-ty-banner.png')"></image>
								<view class="juli" v-if="el.juli!=0">{{el.juli+'km'}}</view>
							</view>
							<view class="cont">
								<view class="title">{{el.name}}</view>
								<view class="address">{{el.address}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- swiper遮罩层 -->
		<view class="zuocemask" v-if="picshow" @click="pichide"></view>
		<!-- 景区图片swiper -->
		<swiper class="picswiper-container" v-if="picshow" :indicator-dots="true" :autoplay="true" :interval="3000"
			:duration="1000">
			<swiper-item class="swiper-wrapper swiper-slide" v-for="(el,ind) in infoImg">
				<view class="swiper-item">
					<img style="width: 100%;height:100%" :src="'http://newmap.tour-ma.com/w960'+el"></img>
				</view>
			</swiper-item>
		</swiper>
		<view class="zuocemask" v-if="caidanshow" @click="bdhide"></view>
		<!-- 左侧隐藏菜单栏 -->
		<view class="zuocecd" v-if="caidanshow">
			<view class="zuocetq">
				<view class="zuocetq-ts">
					<view class="zuocetq-jt">
						<img class="zuocetq-tqtb" :src="dttq">
						<view style="width: 50%">
							{{weather.daily_forecast[0].tmp.min}}~{{weather.daily_forecast[0].tmp.max}}℃
							<view>今天</view>
						</view>
					</view>
					<view class="zuocetq-mt">
						<img class="zuocetq-tqtb" :src="crtq">
						<view>
							{{weather.daily_forecast[1].tmp.min}}~{{weather.daily_forecast[1].tmp.max}}℃
							<view>明天</view>
						</view>
					</view>
				</view>
			</view>
			<view class="zuocetq" style="display: flex">
				<view class="zuocetq-yy">
					<view>自动讲解</view>
					<view class="zuocetq-yy-ts">靠近游玩点，自动为您播放语音</view>
				</view>
				<img class="zuocetq-zdbf" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_yydk.png"
					@click="yyplay" v-if="zidong">
				<img class="zuocetq-zdbf" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_yygb.png"
					@click="yyplay" v-if="!zidong">
			</view>
			<view class="zuocetq">
				<view class="quanjing" @click="to720()">
					<img class="icontop" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_720.png" />
					720°全景图
					<img class="iconright" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_jt.png" />
				</view>
			</view>
			<view class="zuocetq">
				<view class="quanjing" style="padding: 5px 12px;font-size: 16px">全部服务</view>
				<view class="fuwuleib">
					<view class="fuwuleib-title" @click="chosefuwu(179)">
						<view class="fuwuleib-title-img">
							<img v-if="isgjc" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_gjz_02.png"
								alt="">
							<img v-if="!isgjc" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_gjz_01.png"
								alt="">
						</view>
						<view class="fuwuleib-title-name">公交站
							<img v-if="isgjc" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_gx_02.png"
								alt="">
							<img v-if="!isgjc" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_gx_01.png"
								alt="">
						</view>
					</view>
					<view class="fuwuleib-title" @click="chosefuwu(176)">
						<view class="fuwuleib-title-img">
							<img v-if="istcc" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_tcc_02.png"
								alt="">
							<img v-if="!istcc" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_tcc_01.png"
								alt="">
						</view>
						<view class="fuwuleib-title-name">停车场
							<img v-if="istcc" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_gx_02.png"
								alt="">
							<img v-if="!istcc" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_gx_01.png"
								alt="">
						</view>
					</view>
					<view class="fuwuleib-title" @click="chosefuwu(177)">
						<view class="fuwuleib-title-img">
							<img v-if="isljt" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_ylz_02.png"
								alt="">
							<img v-if="!isljt" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_ylz_01.png"
								alt="">
						</view>
						<view class="fuwuleib-title-name">医疗站
							<img v-if="isljt" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_gx_02.png"
								alt="">
							<img v-if="!isljt" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_gx_01.png"
								alt="">
						</view>
					</view>
					<view class="fuwuleib-title" @click="chosefuwu(179)">
						<view class="fuwuleib-title-img">
							<img v-if="isgjc" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_ggcs_02.png">
							<img v-if="!isgjc" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_ggcs_01.png">
						</view>
						<view class="fuwuleib-title-name">厕所
							<img v-if="isgjc" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_gx_02.png">
							<img v-if="!isgjc" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/icon_gx_01.png">
						</view>
					</view>
				</view>
			</view>
			<view class="zuocetq">
				<view class="quanjing">
					<img class="gzhtpimg" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/linanwlfb.jpg" alt="">
					<view class="gzhtpname">
						<text style="display: block">长按识别图中二维码</text>
						<text style="display: block">关注临安文旅发布公众号</text>
					</view>
				</view>
			</view>
			<view class="zuocetq">
				<view class="quanjing">
					<img class="gzhtpimg" src="http://newmap.tour-ma.com/r/cms/www/m/maps/icon/linanly.png" alt="">
					<view class="gzhtpname">
						<text style="display: block">长按识别图中二维码</text>
						<text style="display: block">关注临安旅游公众号</text>
					</view>
				</view>
			</view>
		</view>
		<view :class="[ 'tanchan',istc?'stanchan':'htanchan']" :style="{height:windowHeight+'px'}">
			<view class="tccont"> 
				<view class="guanbi" @click="setTc">x</view>
				<view class="title">{{nowJson.name}}</view>
				<view class="address">{{nowJson.address}}</view>
				<image v-if="nowJson.logo!=''" class="logo" :src="tabInd==56?nowJson.logo:$getImg(nowJson.logo)" mode="aspectFill"></image>
				<audio v-if="nowJson.mediaPath!=''" style="margin-top: 10px;" :src="$getImg(nowJson.mediaPath)" :name="nowJson.name" controls></audio>
				<!-- <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="swiper-item"></view>
					</swiper-item>
				</swiper> -->
				<view class="jst" v-if="nowJson.des!=''&&nowJson.des!=null">简介</view>
				<view class="jieshao">{{nowJson.des}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import caidan from '../../components/utils/candan.vue';
	import sos from '../../components/utils/sos.vue';
	require('../../components/js/jquery.js');
	var dh = require('../../components/js/daohang.js');
	var web = require('../../components/js/request.js');
	var jweixin = require('jweixin-module')

	var map;
	var bjdian;
	var layers;
	var locmarker; //定位POI
	var nowPois; //所有的Poi
	var nowPoisqt;
	var lastPoi;
	var lastPoi2;
	var lineSpotPois; //线路对应的顺序景点列表
	var driving; //驾车线路
	var gdlocation; //高德参数
	var center = [120.588782, 29.995308, 29.995308]; //地图中心
	var innerAudioContext; //音频播放组件
	var cluster;
	var animation = uni.createAnimation({
		timingFunction: "linear",
	});
	var pageY = 0;
	var isone=true;
	export default {
		components: {
			caidan,
			sos
		},
		data() {
			return {
				istc:false,
				allTag: [],
				nowTag: 0,
				updown: true,
				windowHeight: 0, //屏幕高度
				feat: ['bg', 'road'],
				nid: 0, //用于带景点ID进来的景点，第一次时匹配
				id: 0, //获取分享的购买线路二维码扫描进入的线路id
				//配置部分
				wheight: 800, //地图高度
				tabInd: 0, //类型面板选中索引
				isAuto: true, //是否自动播放
				isplay: false,
				isCenter: false, //
				//定位部分
				locPoint: {
					lat: 0,
					lng: 0
				}, //定位Poi
				nowPoint: {
					lat: 0,
					lng: 0
				}, //当前选中的地点经纬度
				lastloc: -1, //最后一次定位碰撞
				//数据部分
				llLines: [], //浏览线路返回的类别原始数据
				dhLines: [], //导航线路返回的类别原始数据
				nowLine: -1, //当前选择的线路
				//数据部分
				otherDatas: [], //所有点返回的原始数据
				spotsDatas: [], //景点单独列出的原始数据
				nowSpot: 0, //当前点击的景点
				nowAudio: '', //当前播放的语音
				//弹框部分
				infoShow: false, //弹框显示
				infoTit: '', //弹框标题
				infoTxt: '', //弹框内容
				infoIcon: '', //弹框图片
				infoImg: [], //弹框图片列表
				infoUrl: '', //弹框全景URL
				infoAudio: '', //弹框语音
				infoTxtaddress: '', //弹框地址
				infoTxtphone: '', //弹框电话
				infodetail: {},
				//景点图片集弹窗
				picshow: false,
				//菜单弹窗
				caidanshow: false, //菜单弹窗
				//菜单弹窗
				weather: {},
				dttq: '', //当天天气
				crtq: '', //次日天气
				zidong: true, //是否自动播放
				isgjc: true, //判断公交车是否选择
				istcc: true, //判断停车场是否选择
				isljt: true, //判断医疗站是否选择
				isggcs: true, //判断公共厕所是否选择
				codes: ['168', '170', '171', '169'],
				jiazsj: '',
				isbuyxl: false, //是否是精品线路
				issj: false,
				issA: false,
				first: true,
				zxinfo: {
					isplay: false,
					zxisShow: false
				},
				lineInd: 0,
				spotsInd: -1,
				imglist: [],
				isjqr: false,
				showpic: '',
				nowHeight: 68,
				zkstr: '上拉展开',
				nowJson:{}
			}
		},
		onReady() {
			var that = this;
			uni.getSystemInfo({
				complete(e) {
					that.windowHeight = e.windowHeight;
				}
			})
			require('../../components/css/dsjjk.css');
			this.initMap();
			this.setWinHeight();
			this.getWeather();
			// this.getLines();
			innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = true;
			var that = this;
			innerAudioContext.onEnded(function() {
				that.nowAudio = '';
				that.isplay = false;
				that.zxinfo.isplay = false;
			})
		},
		methods: {
			setTouch(e) { //手指按下
				pageY = e.changedTouches[0].pageY; //保存点下的位置
			},
			getMove(e) { //手指拖动
				var moveY = e.changedTouches[0].pageY - pageY; //计算移动位置和第一次点下的位置
				var nowMove = e.changedTouches[0].pageY;
				if (moveY > 0) { //判断向上滑动还是向下滑动
					this.updown = false;
				} else {
					this.updown = true;
				}
				animation.top(nowMove).height(this.windowHeight - nowMove).step({
					duration: 0,
					delay: 0
				}); //描述动画
				this.showpic = animation.export(); //导出动画
			},
			getTouch(e) { //手指放开
				var moveY = e.changedTouches[0].pageY;
				var height = this.windowHeight / 2;
				if (moveY < height) {
					if (this.updown) {
						this.zkstr = '下拉收起'
						animation.top(0).height(this.windowHeight).step({
							duration: 100,
							delay: 0
						}); //描述动画
					} else {
						animation.top(height).height(height).step({
							duration: 100,
							delay: 0
						}); //描述动画
					}
					this.showpic = animation.export();
					return
				}
				if (moveY > height) {
					if (this.updown) {
						animation.top(height).height(height).step({
							duration: 100,
							delay: 0
						})
					} else {
						this.zkstr = '上拉展开'
						animation.top(this.wheight - 68).height(68).step({
							duration: 100,
							delay: 0
						}); //描述动画
					}
					this.showpic = animation.export();
				}
			},
			gotoxjd: function() {
				window.location.href = 'http://la.tour-ma.com/maps.jspx?type=2&waresId=6';
			},
			nato(url) {
				window.location.href = url;
			},
			getIcon(url) {
				return 'http://newmap.tour-ma.com/r/cms/www/newmap/newmap/' + url
			},
			checkspotsInd(ind) {
				this.spotsInd = ind;
				var t = lineSpotPois[ind];
				AMap.event.trigger(t, "click", function() {});
			},
			closev(is) {
				this.infoShow = is;
			},
			changesos(e) {
				this.map_loc(e.type, e.type);
			},
			changezx(e) { //左下角菜单操作
				if (e.type == 'pl') {
					this.musicBtn(this.nowAudio)
				} else {
					if (!this.isIn) {
						uni.showToast({
							title: '您不在景区内'
						});
						return
					}
					if (this.nowPoint.lat != 0) {
						this.lineInd = e.ind;
						if (this.lineInd == 1) {
							dh.xingzou(map, this.locPoint, this.nowPoint)
						} else if (this.lineInd == 2) {
							dh.jiache(map, this.locPoint, this.nowPoint)
						} else if (this.lineInd == 3) {
							dh.gongjiao(map, this.locPoint, this.nowPoint)
						} else if (this.lineInd == 4) {
							dh.qixing(map, this.locPoint, this.nowPoint)
						}
					} else {
						uni.showToast({
							title: '未选择地点'
						});
					}
				}
			},

			issjt: function() {
				if (!this.issj) {
					layers.hide();
					this.issj = true;
					this.feat = ['point', 'building', 'bg', 'road'];
					map.setFeatures(this.feat);
					map.getFeatures();
				} else {
					layers.show();
					this.issj = false;
					this.feat = ['bg', 'road'];
					map.setFeatures(this.feat);
				}
			},
			//设置地图高度
			setWinHeight: function() {
				// #ifndef MP-WEIXIN
				var that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.wheight = res.windowHeight;
					}
				});
				// #endif
				// #ifdef H5
				this.wheight = document.documentElement.clientHeight;
				// #endif
			},
			//初始化地图
			initMap: function() {
				map = new AMap.Map('hotmap', {
					dragEnable: true,
					zoomEnable: true,
					doubleClickZoom: true,
					scrollWheel: true,
					zoom: 15, //级别
					zooms: [10, 17],
					center: center, //中心点坐标
					// features: this.feat
				});
				map.setCity('绍兴市越城区'); // 设置地图显示的城市 此项是必须设置的
				// layers = new AMap.TileLayer({
				// 	getTileUrl: function(x, y, z) {
				// 		var baseurl = 'http://newmap.tour-ma.com/r/cms/www/m/maps/gdtitles/gdtitles/';
				// 		var imgurl = baseurl + z + '/images/' + z + '-' + x + '-' + y + '.png'
				// 		return imgurl;
				// 	},
				// 	opacity: 1,
				// 	zIndex: 1,
				// 	zooms: [10, 17]
				// });
				// map.add(layers)
				//设置显示范围
				bjdian = new AMap.Bounds([118.957807, 30.045595], [119.825459, 30.310625]);
				map.on('zoomchange', function(e) {});
				//判断是否在微信环境中
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					//配置微信参数
					this.configWX();
				} else {
					//配置高德参数
					this.configGD();
					//定时后开始定位
					setTimeout(this.map_loc(true, true), 60000);
				}

			},
			//配置微信
			configWX: function() {
				var url = "/getwechat/access_token.jspx";
				var arg = {
					url: location.href.split('#')[0]
				};
				var that = this;
				web.httpPost(that, url, arg, function(res) {
					if (res.data.status == 200) {
						jweixin.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: res.data.appId, // 必填，公众号的唯一标识
							timestamp: Number(res.data.timestamp), // 必填，生成签名的时间戳
							nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.signature, // 必填，签名
							jsApiList: ['getLocation', 'openLocation'] // 必填，需要使用的JS接口列表
						});
						jweixin.ready(function() {
							// TODO 
							console.log('准备获取位置信息')
							setTimeout(that.map_loc(true, true), 3000);
						});
						jweixin.error(function(res) {
							console.log(res)
						});
					} else {}

				})
			},
			//配置高德参数
			configGD: function() {
				AMap.plugin('AMap.Geolocation', function() {
					gdlocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 5000, //超过10秒后停止定位，默认：5s
						maximumAge: 0, //定位结果缓存0毫秒，默认：0
						convert: false, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
						showButton: false, //显示定位按钮，默认：true
						showMarker: false, //定位成功后在定位到的位置显示点标记，默认：true
						showCircle: false, //定位成功后用圆圈表示定位精度范围，默认：true
						panToLocation: false, //定位成功后将定位到的位置作为地图中心点，默认：true
						zoomToAccuracy: false //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
					});
					map.addControl(gdlocation);
				});
			},
			map_loc: function(isCenter, isclick) {
				//判断是否在微信环境中
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					var that = this;
					jweixin.getLocation({
						type: 'gcj02',
						success: function(res) {
							that.locPoint.lat = res.gdLatitude;
							that.locPoint.lng = res.gdLongitude;
							that.getjuli();
							if (that.first) {
								that.initConfig();
								that.first = false;
							}
						},
						fail: function(res) {
							console.log(res);
						}
					});
				} else {
					//每5秒刷新一次
					var that = this;
					gdlocation.getCurrentPosition(function(status, data) {
						if (status == 'complete') {
							//取到经纬度，赋值给this.locPoint
							that.locPoint.lat = data.position.lat;
							that.locPoint.lng = data.position.lng;
							that.getjuli();
							if (that.first) {
								that.initConfig();
								that.first = false;
							}
						} else {
							console.log(data.message);
						}
					});
				}
				if (locmarker == null) {
					var myIcon = new AMap.Icon({
						size: new AMap.Size(40, 40),
						image: 'http://newmap.tour-ma.com/r/cms/www/m/maps/icon/poiloc.png',
						imageSize: new AMap.Size(40, 40)
					});
					locmarker = new AMap.Marker({
						position: new AMap.LngLat(this.locPoint.lng, this.locPoint.lat),
						icon: myIcon
					}); // 创建标注
					map.add(locmarker); // 将定位POI添加到地图中
					//locmarker.disableMassClear();
				} else {
					//判断是否在地图显示范围内
					var is = bjdian.contains(new AMap.LngLat(this.locPoint.lng, this.locPoint.lat))
					this.isIn = is;
					if (is) {
						locmarker.setPosition(new AMap.LngLat(this.locPoint.lng, this.locPoint.lat));
					} else {
						if (isclick) {
							alert('您所在位置不在景区中')
						}
					}
					locmarker.setPosition(new AMap.LngLat(this.locPoint.lng, this.locPoint.lat));
				}
				if (isCenter && is) {
					map.panTo(new AMap.LngLat(this.locPoint.lng, this.locPoint.lat)); //将定位移到地图中间
					this.isCenter = false;
				}
				//如果开着自动
				if (this.isAuto) {
					this.checkPois(); //碰撞检测
				}
				setTimeout(this.map_loc, 60000);
			},
			getjuli: function() {
				var tmp = this.spotsDatas;
				for (var i = 0; i < tmp.length; i++) {
					var p1 = [tmp[i].gdLongitude, tmp[i].gdLatitude];
					var p2 = [this.locPoint.lng, this.locPoint.lat];
					var dis = AMap.GeometryUtil.distance(p1, p2);
					tmp[i].juli = Number((dis / 1000).toFixed(0));
				}
				tmp.sort(function(a, b) {
					return a.juli - b.juli
				})
				this.spotsDatas = tmp;
			},
			//点的碰撞
			checkPois: function() {
				for (var i = 0; i < this.spotsDatas.length; i++) {
					var poi = new AMap.LngLat(this.spotsDatas[i].gdLongitude, this.spotsDatas[i].gdLatitude);
					var poi1 = new AMap.LngLat(this.locPoint.lng, this.locPoint.lat);
					//条件符合并且景点面板
					if ((AMap.GeometryUtil.distance(poi1, poi)).toFixed(2) < parseFloat(this.spotsDatas[i].radius)) {
						if (this.lastloc != i) {
							this.lastloc = i;
							this.tabIInd = 0;
							var t = nowPois[i];
							//点击事件
							AMap.event.trigger(t, "click", function() {});
						}
						break;
					}
				}
			},
			//总的配置
			initConfig: function() {
				if (!this.id && typeof(this.id) != "undefined" && this.id != 0) {
					this.isbuyxl = true;
				} else {
					if (this.tabInd == null || this.tabInd == 0) {
						this.checkInd(1); //加载景点
					} else {
						this.checkInd(this.tabInd); //加载景点
					}
				}
			},
			//底部面板类型选择
			checkInd: function(ind) {
				if (cluster != undefined) {
					cluster.clearMarkers()
				}
				if (!innerAudioContext.paused) {
					innerAudioContext.onPause(function() {})
				}
				this.isplay = false;
				this.zxinfo.isplay = false;
				this.zxinfo.zxisShow = false;
				innerAudioContext.pause()
				this.tabInd = ind; //切换当前面板选择
				this.infoShow = false;
				this.nowSpot = 0;
				this.jiazsj = "";
				if (ind == 6) {
					this.getTagwb();
					return
				} else {
					this.getTagwh(ind);
				}
				if(!isone){//首次进来不展开
					animation.top(this.windowHeight / 2).height(this.windowHeight / 2).step({
						duration: 100,
						delay: 0
					})
					this.showpic = animation.export();
				}
				isone=false;
			},
			//菜单里服务栏目选择
			chosefuwu: function(code) {
				var code1 = code + '';
				if (code == 170) {
					this.isgjc = !this.isgjc;
				} else if (code == 171) {
					this.istcc = !this.istcc;
				} else if (code == 169) {
					this.isljt = !this.isljt;
				} else if (code == 168) {
					this.isggcs = !this.isggcs
				}
				var tmp = this.codes.indexOf(code1);
				if (tmp > -1) {
					this.codes.splice(tmp, 1);
				} else {
					this.codes.push(code + '')
				}
				// this.getDatas(3);
			},
			setTc(el){//查看详情
				this.istc=!this.istc;
				this.nowJson=el;
			},
			getList(json,ind){
				this.nowTag=ind;
				if(this.tabInd==6){
					this.getDataswb(json.ctgId)
				}else{
					this.getDataswh(json.level,this.tabInd)
				}
			},
			//获取其他tag
			getTagwh(ind) {
				var url = 'dtdataStatistic.jspx';
				var para = {
					category: ind
				}
				var that = this;
				web.httpPost(that, url, para, function(res) {
					var json = res.data.data;
					that.allTag = res.data.data.reverse();
					for (var i = 0; i < json.length; i++) {
						if (json[i].num > 0) {
							that.getDataswh(json[i].level,ind);
							that.nowTag = i;
							break;
						}
					}
				})
			},
			//根据tag类型获取数据
			getDataswh: function(levle,num) {
				var url = "wareInfo/list4.jspx";
				var para = {
					ctgId: num,
					level:levle
				};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					//移动到第一个点
					var json = res.data.results;
					var tmp=[];
					if (json.length > 0) {
						for(var i=0;i<json.length;i++){
							json[i].gdLongitude=json[i].lng;
							json[i].gdLatitude=json[i].lat;
							tmp.push(json[i]);
						}
						for (var i = 0; i < tmp.length; i++) {
							if(tmp[i].gdLongitude==null||tmp[i].gdLatitude==null){
								tmp[i].juli='0'
							}else{
								var p1 = [tmp[i].gdLongitude, tmp[i].gdLatitude];
								var p2 = [that.locPoint.lng, that.locPoint.lat];
								var dis = AMap.GeometryUtil.distance(p1, p2);
								tmp[i].juli = Number((dis / 1000).toFixed(0));
							}
						}
						tmp.sort(function(a, b) {
							return a.juli - b.juli
						})
						that.spotsDatas = tmp;
						that.renderResult(true);
					} else {
						that.spotsDatas = [];
						that.otherDatas = [];
						that.jiazsj = '暂无数据';
						map.clearMap();
					}
					that.addjhd();
				})
			},
			//获取文博类型
			getTagwb() {
				var para = {
					type: 2,
					waresCategoryId: 0
				};
				var url = "wares/statisticdata.jspx";
				var that = this;
				web.httpPost(that, url, para, function(res) {
					var json = res.data.datas;
					that.allTag = res.data.datas;
					for (var i = 0; i < json.length; i++) {
						if (json[i].num > 0) {
							that.getDataswb(json[i].ctgId);
							that.nowTag = i;
							break;
						}
					}
				})
			},
			//根据文博类型获取数据
			getDataswb: function(num) {
				var url = "wareInfo/list3.jspx";
				var para = {
					ctgId: num
				};
				var that = this;
				web.httpPost(that, url, para, function(res) {
					//移动到第一个点
					var json = res.data.results;
					if (json.length > 0) {
						for (var i = 0; i < json.length; i++) {
							var p1 = [json[i].gdLongitude, json[i].gdLatitude];
							var p2 = [that.locPoint.lng, that.locPoint.lat];
							var dis = AMap.GeometryUtil.distance(p1, p2);
							json[i].juli = Number((dis / 1000).toFixed(0));
						}
						json.sort(function(a, b) {
							return a.juli - b.juli
						})
						that.spotsDatas = json;
						that.renderResult(true);
					} else {
						that.spotsDatas = [];
						that.otherDatas = [];
						that.jiazsj = '暂无数据';
						map.clearMap();
					}
					that.addjhd();
				})
			},
			//添加聚合点
			addjhd() {
				if (this.tabInd == 0) {
					var tmp = {
						gridSize: 50,
						styles: [{
							url: 'http://newmap.tour-ma.com/r/cms/www/newmap/newmap/poijhd.png',
							size: new AMap.Size(40, 40),
							textColor: '#fff',
							textSize: 18
						}]
					}
					//添加聚合组件
					map.plugin(["AMap.MarkerClusterer"], function() {
						cluster = new AMap.MarkerClusterer(map, nowPois, tmp);
					});
				}
			},
			//渲染Pois
			renderResult: function(isSpot) {
				//清空原有点
				map.clearMap();
				//重置地图POI列表
				nowPois = new Array();
				var markerList = [];
				var icon = '';
				for (var i = 0; i < this.spotsDatas.length; i++) {
					//判断是否第一次进页面。
					this.spotsDatas[i].nowSpot = i;
					icon = this.$getImgs('yc-ditu-icon-'+this.tabInd+'.png');
					// if (this.spotsDatas[i].audio != '') {
					// 	icon = "http://newmap.tour-ma.com/r/cms/www/m/maps/icon/poiyy.png";
					// } else {
					// 	icon = "http://newmap.tour-ma.com/r/cms/www/newmap/newmap/poi" + this.spotsDatas[i].ctgId +".png";
					// }
					var myIcon = new AMap.Icon({
						size: new AMap.Size(26, 30),
						image: icon,
						imageSize: new AMap.Size(26, 30)
					});
					var marker = new AMap.Marker({
						map: map,
						position: new AMap.LngLat(this.spotsDatas[i].gdLongitude, this.spotsDatas[i].gdLatitude),
						title: this.spotsDatas[i].name,
						icon: myIcon,
						extData: this.spotsDatas[i]
					})
					marker.setLabel({
						//修改label相对于maker的位置
						offset: new AMap.Pixel(-2, -4),
						content: "<div class='labelinfo'>" + this.spotsDatas[i].name +
						"</div>", //markerContentCom
					});
					markerList.push(marker)
					// 给每个点标记注册点击事件
					var that = this;
					AMap.event.addListener(marker, 'click', function() {
						that.detail(this, this.getExtData());
					});
					if (this.nid == this.spotsDatas[i].waresId) {
						this.nid = 0;
						var t = nowPois[i];
						//点击事件
						AMap.event.trigger(t, "click", function() {});
					}
				}
				nowPois = markerList;
			},
			//点击下方景点列表
			clickSpot: function(ind, isspot) {
				this.nowSpot = ind
				this.infoShow = true;
				var t = nowPois[ind];
				//点击事件
				AMap.event.trigger(t, "click", function() {});
			},
			clickLine: function(ind) {
				var t = lineSpotPois[ind];
				var position = t.getPosition(); //获得经纬度
				map.panTo(position);
				//点击事件
				AMap.event.trigger(t, "click", function() {});
			},
			//线路类型列表点选
			checkLinesInd: function(ind) {
				this.spotsInd = -1;
				this.nowLine = ind;
				this.getxl(ind); //根据景点生成路线
				this.zxinfo.tabShow = true;
			},
			getxl: function(ind) {
				map.clearMap();
				var json = this.llLines[ind].scenicList;
				var tmp = [];
				for (var i = 0; i < json.length; i++) {
					tmp.push(json[i])
				}
				for (var i = 0; i < tmp.length; i++) {
					if (i < tmp.length - 1) {
						var startLngLat = {
							lng: tmp[i].gdLongitude,
							lat: tmp[i].gdLatitude
						};
						var endLngLat = {
							lng: tmp[i + 1].gdLongitude,
							lat: tmp[i + 1].gdLatitude
						};
						dh.jiache(map, startLngLat, endLngLat)
					}
				}
				var facilities = [];
				for (var i = 0; i < tmp.length; i++) {
					var icon = "http://newmap.tour-ma.com/r/cms/www/newmap/newmap/poinum.png";
					var myIcon = new AMap.Icon({
						size: new AMap.Size(40, 40),
						image: icon,
						imageSize: new AMap.Size(40, 40)
					});
					tmp[i].ind = i;
					var marker = new AMap.Marker({
						map: map,
						position: new AMap.LngLat(tmp[i].gdLongitude, tmp[i].gdLatitude),
						title: tmp[i].name,
						icon: myIcon,
						extData: tmp[i]
					});
					marker.setLabel({ //修改label相对于maker的位置
						offset: new AMap.Pixel(0, -1),
						content: "<div class='xllabelinfo'>" + Number(i + 1) + "</div>"
					});
					facilities.push(marker);
					var that = this;
					AMap.event.addListener(marker, 'click', function() {
						that.detail(this, this.getExtData());
					});
				}
				map.add(facilities)
				lineSpotPois = facilities; // 将所有POI点缓存
			},
			//获取游览线路列表
			getLines: function() {
				var para = {
					waresId: 0,
					spotType: 2
				};
				var url = "/spotCollectList.jspx";
				var that = this;
				web.httpPost(that, url, para, function(res) {
					if (res.data.status == 200) {
						for (var i = 0; i < res.data.data.length; i++) {
							if (res.data.data[i].type == 1) { //行走线路
								that.llLines.push(res.data.data[i]);
							} else { //游览线路
								that.dhLines.push(res.data.data[i]);
							}
						}
					}
				})
			},
			//全景页面
			to720: function() {
				window.location.href = 'https://720yun.com/t/r2rne9yaaru84qn6cw?pano_id=RHwX1V74oRQQyRSH'
			},
			bdnav: function() {
				this.caidanshow = true;
			},
			bdhide: function() {
				this.caidanshow = false;
			},
			pichide: function() {
				this.picshow = false;
				this.imglist = [];
			},
			//景点详情
			infoBtn: function(json) {
				this.infoImg = json.imgList;
				this.infoTit = json.name;
				this.infoTxt = json.introduce;
			},
			//音乐按钮
			musicBtn: function(audioUrl) { //console.log("近方法", audioUrl)
				if (audioUrl.length > 0) {
					if (this.nowAudio != audioUrl) {
						innerAudioContext.src = 'http://newmap.tour-ma.com' + audioUrl;
						innerAudioContext.play(); //如果变更了播放地址，或者原本是暂停状态，则播放
						this.isplay = true;
						this.zxinfo.isplay = true;
						this.nowAudio = audioUrl;
					} else {
						if (this.isplay) {
							innerAudioContext.pause()
							this.isplay = false;
							this.zxinfo.isplay = false;
						} else {
							innerAudioContext.play()
							this.isplay = true;
							this.zxinfo.isplay = true;
						}
					}
				} else {
					uni.showToast({
						title: '未选择景区'
					});
				}
			},
			navBtnx: function() {
				this.zxinfo.tabShow = false;
				this.isplay = false;
				this.zxinfo.isplay = false;
				if (this.tabInd == 0) {
					var t = nowPois[this.nowSpot];
				} else {
					var t = nowPoisqt[this.nowSpot];
				}
				var content = t.getExtData();
				uni.openLocation({
					gdLatitude: content.tencentLatitude, // 纬度，浮点数，范围为90 ~ -90
					gdLongitude: content.tencentLongitude, // 经度，浮点数，范围为180 ~ -180。
					name: content.name, // 位置名
					address: content.address, // 地址详情说明
					scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
					infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
				})

			},
			getWeather: function() {
				var url = "weather/hefeng.jspx";
				var para = {};
				var that = this;
				web.httpGet(that, url, para, function(res) {
					that.weather = res.data.HeWeather6[0];
					that.dttq = "http://newmap.tour-ma.com/r/cms/www/m/xcx/" + res.data.HeWeather6[0]
						.daily_forecast[0].cond_code_d + ".png";
					that.crtq = "http://newmap.tour-ma.com/r/cms/www/m/xcx/" + res.data.HeWeather6[0]
						.daily_forecast[1].cond_code_d + ".png";
				})
			},
			yyplay: function() {
				this.zidong = !this.zidong;
				this.checkAuto();
			},
			//切换自动碰撞
			checkAuto: function() {
				this.isAuto = !this.isAuto
			},
			towebsite: function() {
				alert('暂无官方网站')
			},
			xh: function() {
				//判断数组中是否包含某字符串
				Array.prototype.contains = function(needle) {
					for (i in this) {
						if (this[i].indexOf(needle) > 0)
							return i;
					}
					return -1;
				}
				var device_type = navigator.userAgent; //获取userAgent信息
				var md = new MobileDetect(device_type); //初始化mobile-detect
				var os = md.os(); //获取系统
				phoneos = os;
			},
			jdChose: function() {
				this.issA = !this.issA;
				if (this.issA) {
					this.checkInd(8);
				} else {
					this.checkInd(0);
				}
			},
			picclick: function() {
				this.picshow = true;
			},
			detail: function(e, json) {
				this.zxinfo.zxisShow = true;
				var audiourl = '';
				//将点位移动屏幕中间
				var tmp = map.getZoom();
				var jibie = 1;
				var lat = 0.000928;
				var lng = 0.000086;
				if (tmp != 18) {
					jibie = (tmp - 18);
					for (var i = 0; i < jibie; i++) {
						lat = lat / 2;
						lng = lng / 2
					}
				}
				var lng = json.gdLongitude - lng;
				var lat = json.gdLatitude - lat;
				this.nowPoint = {
					lat: lat,
					lng: lng
				};
				var new_point = new AMap.LngLat(lng, lat);
				map.panTo(new_point); //转到该点位置
				if (lastPoi2 != null && lastPoi2 != undefined) {
					var image = lastPoi2.w.icon.w.image;
					var myIcon = new AMap.Icon({
						size: new AMap.Size(40, 40),
						image: image,
						imageSize: new AMap.Size(40, 40)
					});
					lastPoi2.setIcon(myIcon)
					var label = lastPoi2.getExtData().ind + 1;
					lastPoi2.setLabel({
						offset: new AMap.Pixel(5, -2),
						content: "<div class='xllabelinfo'>" + label + "</div>", //markerContentCom
					})
					lastPoi2.setzIndex(1)
				}
				lastPoi2 = e;
				var myIcon = new AMap.Icon({
					size: new AMap.Size(28, 36),
					image: 'http://newmap.tour-ma.com/r/cms/www/m/maps/icon/poiloc.png',
					imageSize: new AMap.Size(28, 36)
				});
				e.setzIndex(9999)
				e.setIcon(myIcon);
				e.setLabel({ //修改label相对于maker的位置
					offset: new AMap.Pixel(5, -2),
					content: "<div class='xllabelinfo'></div>", //markerContentCom
				});
				// audiourl = json.media_path;
				// this.infoBtn(json);
				var logo = '';
				if (json.logo == '') {
					logo = this.$getImgs('yc-ty-banner.png');
				} else {
					if(this.tabInd==56){
						logo = json.logo;
					}else{
						logo = this.$getImg(json.logo);
					}
				}
				var content = ''
				content += "<div class='xxc'>",
				content += "<div class='xxc-top'>",
				content += "<img class='xxc-img' src='" + logo + "'>",
				content += "<div class=content-tc>",
				content += "<div class=title>" + json.name + "</div>",
				content += "<div class='address'>建议游玩50分钟</div>",
				content += "</div>",
				content += "</div>",
				content += "<div class='xxc-bottom'>",
				content += "<div class='xxc-bottom-list' id='qj"+json.uid+"'>",
				content +="<img class='xxc-bottom-list-img' src='http://61.174.208.14:9090/r/cms/www/m/ditu/yc-tc-daohang.png'>",
				content += "<div class='xxc-bottom-list-txt'>出发参观</div>",
				content += "</div>"
				content += "<div class='xxc-bottom-list'>",
				content +=
				"<img class='xxc-bottom-list-img' src='http://61.174.208.14:9090/r/cms/www/m/ditu/yc-tc-shipin.png'>",
				content += "<div class='xxc-bottom-list-txt'>全景视频</div>",
				content += "</div>"
				if(json.mediaPath!=''){
					content += "<div class='xxc-bottom-list2' id='yy"+json.uid+"'>"
					content +="<img class='xxc-bottom-list-img' src='http://61.174.208.14:9090/r/cms/www/m/ditu/yc-tc-yuyin.png'>"
					content += "<div class='xxc-bottom-list-txt'>语音讲解</div>",
					content += "</div>"
					content += "</div>"
				}
				content += "</div>",
				content += "</div>"
				$(document).on("click", "#qj"+json.uid, function() {
					window.location.href = 'https://uri.amap.com/marker?position='+json.gdLongitude+','+json.gdLatitude
				})
				var that=this;
				$(document).on("click", "#yy"+json.uid, function() {
					that.setTc(json)
				})
				//创建 infoWindow 实例	
				var infoWindow = new AMap.InfoWindow({
					content: content, //传入 dom 对象，或者 html 字符串
					offset: new AMap.Pixel(5, -35)
				});
				infoWindow.open(map, new AMap.LngLat(lng, lat));
				// if (this.tabInd == 0 || this.tabInd == 1) { //只有线路和景区才播放语音
				// 	if (audiourl != '' && audiourl != undefined) {
				// 		this.musicBtn(audiourl)
				// 	}
				// }
			}
		}
	}
</script>

<style>
	.jqmc {
		position: relative;
		top: -13px;
	}

	.btns_nb {
		position: absolute;
		width: 42px;
		height: 117px;
		right: 14px;
		top: 20px;
		box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.14);
		border-radius: 42px;
		background: rgba(255, 255, 255, 1);
	}

	.iconfull {
		width: 20px;
		height: 20px;
		margin: 9px 0px 0px 0px;
	}

	.btns_btns {
		cursor: pointer;
		height: 50%;
		border-bottom: 1px solid #DDDDDD;
		width: 70%;
		margin-left: 15%;
		text-align: center;
	}

	.btns_des {
		font-size: 9px;
		line-height: 12px;
		color: #666666;
	}

	.btm-content {
		background: #fff;
		position: absolute;
	}
</style>
